<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">Home</el-menu-item>
    <el-menu-item index="3">登录</el-menu-item>
    <el-menu-item index="4">Flex布局示例</el-menu-item>
    <el-menu-item index="5">websocket</el-menu-item>
    <el-menu-item index="6">vue2</el-menu-item>
    <el-menu-item index="7">watchAndcomputed</el-menu-item>
    <el-menu-item index="8">Timer</el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import router from "../../router";

const activeIndex = ref('1')

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  if (key === '1'){
    router.push({name: 'HelloWorld'})
  }else if (key === '2'){
    router.push({name: 'Home'})
  }else if (key === '3'){
    router.push({name: 'Login'})
  }else if (key === '4'){
    router.push({name: 'FlexDemo'})
  }else if (key === '5'){
    router.push({name: 'WebSocket'})
  }else if (key === '6'){
    router.push({name: 'useVue2'})
  }else if (key === '7'){
    router.push({name: 'watchAndcomputed'})
  }else if (key === '8'){
    router.push({name: 'Timer'})
  }
}
</script>

<style scoped>
.el-menu-demo {
  border-bottom: solid 1px #e6e6e6;
  display: flex;
  justify-content: center;
}
</style>